<template>
  <div>
    <div>
      <div style="padding: 20px 0; font-weight: 700">基础账号</div>
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="账号" name="account">
              <a-input v-model:value="form.account" placeholder="请输入账号" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="昵称" name="other">
              <a-input v-model:value="form.nickName" placeholder="请输入您的昵称" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="密码" name="other">
              <a-input-password v-model:value="form.passwordstr" placeholder="请输入您的昵称" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="我的角色" name="other">
              <a-select
                v-model:value="form.role_id"
                show-search
                placeholder="一级分类"
                :options="roleList"
                @change="handleChange"
                allowClear
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="头像" name="other">
              <div
                @click="select_img"
                style="
                  width: 80px;
                  height: 80px;
                  padding: 5px;
                  border: 1px solid #f1f1f1;
                  border-radius: 8px;
                "
              >
                <img :src="form.head_img" style="width: 100%; height: 100%; object-fit: contain"
              /></div>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="状态" name="status">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.status"
                  checked-children="正常"
                  un-checked-children="禁用"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div>
        <div style="padding: 20px 0; font-weight: 700">文件配置</div>
        <div>
          <a-form :model="form" :rules="rules" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="通知地址" name="other">
                  <a-input
                    v-model:value="form.wx_config.notifyAddress"
                    placeholder="微信通知地址"
                  />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="小程序Appid" name="other">
                  <a-input v-model:value="form.wx_config.Appid" placeholder="微信小程序Appid" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="小程序密钥" name="other">
                  <a-input v-model:value="form.wx_config.Appsecret" placeholder="微信小程序密钥" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商户号" name="other">
                  <a-input v-model:value="form.wx_config.merchantNumber" placeholder="商户号" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="微信支付证书(.cert)" name="other">
                  <a-input
                    v-model:value="form.wx_config.payCert"
                    placeholder="微信支付证书(.cert)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="微信支付证书(.key)" name="other">
                  <a-input v-model:value="form.wx_config.payKey" placeholder="微信支付证书(.key)" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>
    <div style="display: flex; align-items: center; justify-content: center">
      <a-button type="primary" @click="submit">{{ select_title }}</a-button>
    </div>

    <a-drawer
      title="文件管理"
      width="90%"
      :open="open_image"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose1"
      ><fileIndex @upload="upload_file"
    /></a-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, onBeforeUpdate } from 'vue';
  import fileIndex from '/@/views/locality/fileManagement/fileIndex.vue';

  {
    fileIndex;
  }
  let $emit = defineEmits(['onReturn']);
  let props = defineProps(['select_title', 'select_data', 'roleList']);
  const open_image: any = ref(false);
  const onClose1 = () => {
    open_image.value = false;
  };
  const select_uploading: any = ref();
  function select_img() {
    open_image.value = true;
    select_uploading.value = 'head_img';
  }
  function upload_file(type, item) {
    if (type == 'image') {
      if (select_uploading.value == 'head_img') {
        form.value.head_img = item[0].url;
      }
      open_image.value = false;
    }
  }
  const form: any = ref({
    account: '',
    company_config: '',
    head_img: '',
    nickName: '',
    role_id: '',
    wx_config: {
      notifyAddress: '',
      Appid: '',
      Appsecret: '',
      merchantNumber: '',
      payCert: '',
      payKey: '',
    },
    status: false,
  });

  function submit() {
    if (form.value.status) form.value.status = 'normal';
    else form.value.status = 'destroy';

    if (form.value.wx_config) form.value.wx_config = JSON.stringify(form.value.wx_config);
    else form.value.wx_config = '';
    $emit('onReturn', form.value, '编辑');
  }
  const rules: any = {
    account: [{ required: false, message: '请输入账号' }],
    other: [{ required: false, message: '控制输入框' }],
  };

  const handleChange = (value: any) => {
    form.value.role_id = value;
  };

  onMounted(() => {
    form.value = props.select_data;
    if (form.value.wx_config) {
      form.value.wx_config = JSON.parse(form.value.wx_config);
    } else {
      form.value.wx_config = {
        notifyAddress: '',
        Appid: '',
        Appsecret: '',
        merchantNumber: '',
        payCert: '',
        payKey: '',
      };
    }
  });
  onBeforeUpdate(() => {
    form.value = props.select_data;
    if (form.value.wx_config) {
      try {
        form.value.wx_config = JSON.parse(form.value.wx_config);
      } catch (e) {
        e;
      }
    } else {
      form.value.wx_config = {
        notifyAddress: '',
        Appid: '',
        Appsecret: '',
        merchantNumber: '',
        payCert: '',
        payKey: '',
      };
    }
  });
</script>

<style></style>
